<template>
	<div>
		<el-table :data="tableData" border style="width: 100%" class="list">
			<el-table-column prop="id" label="房间id" width="70"></el-table-column>
			<el-table-column prop="item_id" label="房间类型" width="70"></el-table-column>
			<el-table-column prop="url" label="房间图片"></el-table-column>
			<el-table-column label="操作">
				<el-table-column label="操作" width="170">
					<template slot-scope="scope">
						<el-button size="small" @click="$emit('change',scope.$index)">编辑</el-button>
						<el-popover placement="bottom" width="160" trigger="click">
							<p>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text">取消</el-button>
								<el-button type="primary" size="mini" @click="del(scope.row)">确定</el-button>
							</div>
							
							<el-button size="small" type="danger" slot="reference" style="position:relative;z-index=2">删除</el-button>
						</el-popover>
			
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: "RoomList",
		props: ["roomList"],
		computed: {
			tableData: function() {
				let arr = [];
				console.log(this.roomList, 789)
				this.roomList.forEach((item) => {
					console.log(item)
					let _item = { ...item
					};
					console.log(_item.item_id)
					switch (_item.item_id) {
						case 1:
							_item.item_id = "豪华房";
							break;
						case 2:
							_item.item_id = "双人房";
							break;
						case 3:
							_item.item_id = "单人房";
							break;

					}
					arr.push(_item);

				});
				return arr;
			}
		},
		methods: {
			del: async function(row) {
				let data = await this._axios
					.post("/ycw/rooms/delImage", {
						id: row.id
					})
					.then(data => data.data);
				if (data) {
					this.$alert(`${data.msg}`, {
						confirmButtonText: "确定",
						callback: () => {
							this.$message({
								type: "warning",
								message: `${data.msg}`
							});
				
							this.$emit("refresh");
						
						}
					});
				}
			},
			handleEdit(index, row) {
				alert(index, row);
			}
		}
	};
</script>

<style lang="scss" scopted>
	.list {
		height: 70vh;
		overflow-y: scroll;

		&::before {
			display: none;
		}
	}
</style>
